<template>
  <div id="conentpage" class="rightBodyContent">
    <div class="rightBodyContent-in">
      <tips optionTemplate="taskAdd"></tips>
      <el-form ref="infoForm" :model="infoForm" label-width="140px">
        <el-form-item label="任务类型:">
          <el-radio-group v-model="radioType">
            <el-radio :label="item.id" v-for="item in typelist">{{ item.name }}</el-radio>
          </el-radio-group>
        </el-form-item>
        <el-form-item label="任务名称:">
          <el-input v-model="infoForm.name" placeholder="填写任务名称"></el-input>
        </el-form-item>
        <el-form-item label="完成期限:">
          <el-date-picker type="date"
                          placeholder="选择日期"
                          v-model="infoForm.end_time"
                          :picker-options="pickerOptions1"
                          value-format="yyyy-MM-dd"></el-date-picker>
        </el-form-item>
        <el-form-item label="档案目录:" prop="end_time" v-if="radioType==2">
          <el-button @click="treeVisible=true" class="mb-10" size="small">选择档案目录</el-button>
          {{ checkFileOption ? checkFileOption.name : '' }}
        </el-form-item>
        <el-form-item label="执行人员:">
          <el-button @click="chooseStudent('users_list')" class="mb-10" size="small">选择执行人员</el-button>
          <el-button @click.native="usersOption='users_list',groupVisible=true" size="small">选择执行群组（多选）</el-button>
          <div>
            <el-tag
              :key="tag.id"
              v-for="(tag,index) in users_list"
              closable
              :disable-transitions="false"
              @close="handleClose('users_list',index)"
              class="mr-10"
            >{{ tag.realname }}
            </el-tag>
          </div>
        </el-form-item>
        <el-form-item :label="radioType==3?'抄送人员:':'审阅人员:'" v-if="radioType==2||radioType==3">
          <el-button @click="chooseStudent('read_user')" class="mb-10" size="small">
            {{ radioType == 3 ? '选择抄送人员:' : '选择审阅人员:' }}
          </el-button>
          <el-button @click.native="usersOption='read_user',groupVisible=true" size="small">选择群组（多选）</el-button>
          <span v-if="radioType==2">（执行人确认任务后，由审阅人进行审阅）</span>
          <div>
            <el-tag
              :key="tag.id"
              v-for="(tag,index) in read_user"
              closable
              :disable-transitions="false"
              @close="handleClose('read_user',index)"
              class="mr-10"
            >{{ tag.realname }}
            </el-tag>
          </div>
        </el-form-item>
        <el-form-item label="附件:">
          <uploadFileModle number="20" @getFile="getFile" ref="uploadFileModle" :sycnStatus="true"
                           fileType="file_add"></uploadFileModle>
        </el-form-item>
        <el-form-item label="任务描述:" prop="descript">
          <div class="edit_container">
            <quill-editor v-model="infoForm.descript"
                          ref="myQuillEditor"
                          class="editer"
                          :options="editorOption" @ready="onEditorReady($event)" placeholder="通知内容">
            </quill-editor>
          </div>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="onSubmit">确认提交</el-button>
        </el-form-item>
      </el-form>
    </div>
    <MultipleTeacherModle :visible.sync="studentVisible" @studentFn="studentFn" :userclassId="infoForm.class_id"
                          :usersectionId="infoForm.section_id"
                          :dynamicTagsArray="dynamicTagsArray"></MultipleTeacherModle>
    <treePoupe :visible.sync="treeVisible" @getFileTree="getFileTree"></treePoupe>
    <!--    选择群组-->
    <groupModule :visible.sync="groupVisible" @studentFn="studentFn"></groupModule>
  </div>
</template>

<script>
import {quillEditor} from 'vue-quill-editor' // 调用编辑器
import quillConfig from '@/assets/js/quill-config.js'
import 'quill/dist/quill.core.css'
import 'quill/dist/quill.snow.css'
import 'quill/dist/quill.bubble.css'
import treePoupe from "./components/treePoupe";

export default {
  components: {
    quillEditor,
    treePoupe
  },
  data() {
    return {
      groupVisible: false,
      typeData: 'task_add',
      editorOption: quillConfig, // 任务描述
      infoForm: {
        name: '',
        descript: '',
        users: '', // 执行人
        end_time: '', // 限期
        appendix: '', // 附件
        read_user: '', // 	审阅人 抄送人
      },
      read_user: [], // 审阅人 抄送人
      users_list: [], // 执行人
      treeVisible: false,
      radioType: 1,
      checkFileOption: null,
      typelist: [
        {
          id: 1,
          name: '普通任务'
        },
        {
          id: 2,
          name: '档案任务'
        },
        {
          id: 3,
          name: '公文任务'
        }
      ],
      // 限制时间选择
      pickerOptions1:
        {
          disabledDate(time) {
            return time.getTime() < Date.now() - 8.64e7
          }
        },
      studentVisible: false,
      dynamicTagsArray: {},
      fileList: []
    }
  },
  computed: {
    editor() {
      return this.$refs.myQuillEditor.quill
    }
  },
  mounted() {
  },
  methods: {
    onEditorReady(editor) {
    },
    onSubmit() {
      // 提交 this.$refs.infoForm.validate，这是表单验证
      // radioType 1 '普通任务' 2 '档案任务' 3 '公文任务'
      console.log('数据提交', this.infoForm, this.fileList)

      let optionData = this.getJson(this.infoForm)
      if (!optionData.name) {
        this.$message.error('请填写任务名称')
        return false
      }
      if (Number(this.radioType) === 2 && !this.checkFileOption) {
        this.$message.error('请选择档案目录')
        return false
      }
      if (!this.users_list.length && this.radioType !== 3) {
        this.$message.error('请选择任务执行人员')
        return false
      }
      if (Number(this.radioType) === 2 && !this.read_user.length) {
        this.$message.error('请选择审阅人')
        return false
      }
      // if (Number(this.radioType) === 3 && !this.read_user.length) {
      //   this.$message.error('请选择抄送人')
      //   return false
      // }

      let users = []
      let read = []
      let file = []
      for (let item of this.users_list) {
        users.push(item.id)
      }
      optionData.users = users.join(',')
      if (Number(this.radioType) === 1) {
        delete optionData['read_user']
      }
      if (Number(this.radioType) === 2 || Number(this.radioType) === 3) {
        for (let item of this.read_user) {
          read.push(item.id)
        }
        optionData.read_user = read.join(',')
      }
      for (let item of this.fileList) {
        let a = {}
        a.name = item.name
        a.src = item.src
        file.push(a)
      }
      // optionData.notification = 'tips'
      delete optionData.editorOption
      // optionData.evaluate = ' '
      optionData.appendix = JSON.stringify(file)

      let url_ = this.api.task.default.add
      if (Number(this.radioType) === 2) {
        url_ = this.api.task.archives.add
        optionData.path_id = this.checkFileOption.id
      }
      if (Number(this.radioType) === 3) {
        url_ = this.api.task.official.add
      }
      // console.log('optionData:', optionData)
      // let data_ = 1
      // if (data_) {
      //   return
      // }
      this.$post(url_, optionData).then(res => {
        if (res.code === 0) {
          this.clearFrom()
          this.$message.success(res.msg)
        } else {
          this.$message.error(res.msg)
        }
      })
    },
    clearFrom() {
      this.infoForm = {
        name: '',
        descript: '',
        users: '', // 执行人
        end_time: '', // 限期
        editorOption: quillConfig, // 任务描述
        appendix: '', // 附件
        read_user: '', // 	审阅人 抄送人
      }
      this.read_user = [] // 审阅人 抄送人
      this.users_list = [] // 执行人
      this.$refs.uploadFileModle.getInit()
    },
    chooseStudent(option) {
      // users_list read_user dynamicTagsArray
      let list = {}
      if (option === 'users_list' && this.users_list.length) {
        for (let item of this.users_list) {
          list[item.id] = item
        }
      }
      if (option === 'read_user' && this.read_user.length) {
        for (let item of this.read_user) {
          list[item.id] = item
        }
      }
      this.dynamicTagsArray = this.getJson(list)
      this.usersOption = option
      this.studentVisible = true
    },
    studentFn(option) {
      console.log('获取教师信息L:', option, this.usersOption)
      // read_user: [], // 审阅人 抄送人
      //     users_list: [], // 执行人
      let list = [];
      for (let i in option) {
        list.push(option[i])
      }
      if (this.usersOption === 'users_list') {
        this.users_list = this.getJson(list)
      } else {
        this.read_user = this.getJson(list)
      }
    },
    handleClose(option, index) {
      if (option === 'users_list') {
        this.users_list.splice(index, 1)
      } else {
        this.read_user.splice(index, 1)
      }
    },
    getFileTree(option) {
      this.checkFileOption = option
    },
    getFile(option) {
      this.fileList = this.getJson(option)
    },
    getJson(option) {
      return JSON.parse(JSON.stringify(option))
    },

  },
}
</script>
<style lang="scss">
.ql-editor {
  max-height: 250px;
}

.el-dialog__body {
  padding: 0 20px;
}

.el-radio__label {
  /*display: none;*/
}

.warp {
  width: 80%;
  padding: 30px;
  margin: 0 auto;
}

.el-dialog__body {
  /*text-align: center;*/
}

.el-pagination {
  padding-top: 20px;
}

</style>
